<template>
  <div class="app-container">
    <el-tabs v-model="activeTabName" type="border-card" @tab-click="onTabClick">
      <el-tab-pane label="待处理" :name="TAB_DEALWITH">
        <flow-list ref="dealWithFlowList" :flow-query.sync="dealWithQuery" />
      </el-tab-pane>
      <el-tab-pane label="我的申请" :name="TAB_MY_APPLY">
        <flow-list ref="myApplyFlowList" :flow-query.sync="myApplyQuery" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import flowList from './FlowList.vue'
import { mapGetters } from 'vuex'
import global_const from '@/mixins/global_const'

export default {
  name: 'PublishSheetFlow',
  components: { flowList },
  mixins: [global_const],
  data() {
    return {
      TAB_DEALWITH: 'toDealWith',
      TAB_MY_APPLY: 'myApply',

      activeTabName: 'toDealWith',

      myApplyQuery: {},
      dealWithQuery: {}
    }
  },
  computed: {
    ...mapGetters([
      'env',
      'user'
    ])
  },
  watch: {
  },
  created() {
  },
  mounted() {
    this.myApplyQuery = {
      applierId: this.user.id
    }
    this.dealWithQuery = {
      processerId: this.user.id
    }

    this.$nextTick(() => {
      this.onTabClick()
    })
  },
  methods: {
    onTabClick(val) {
      if (this.activeTabName === this.TAB_DEALWITH) {
        const { dealWithFlowList } = this.$refs
        dealWithFlowList && dealWithFlowList.crud.toQuery()
      } else if (this.activeTabName === this.TAB_MY_APPLY) {
        const { myApplyFlowList } = this.$refs
        myApplyFlowList && myApplyFlowList.crud.toQuery()
      }
    }
  }
}
</script>

<style scoped>

::v-deep .el-tabs__content {
  padding: 2px 2px !important;
}
</style>
